import React, { useEffect, useState } from 'react'
import { AnyAction } from 'redux'
import { useTranslation } from 'react-i18next';
import instance from "../../utils/request"
import { EyeOutlined, ShareAltOutlined } from '@ant-design/icons';

type Props = {}
interface Type {
    summary: any,
    cover: any,
    title: any

}

const Booklet = (props: Props) => {
    const { t, i18n } = useTranslation();
    const [book_list, setbook_list] = useState([])
    const [book_data, setbook_data] = useState([])
    const [link_data, setlink_data] = useState([])
    const [list, setList] = useState(Array<Type>)
    useEffect(() => {
        instance.get("https://bjwz.bwie.com/wipi/api/article/recommend").then(res => {
            console.log(res.data.data);
            setbook_list(res.data.data)
        })
    }, [])

    useEffect(() => {
        instance.get("https://bjwz.bwie.com/wipi/api/knowledge?page=1&pageSize=12&status=publish").then(res => {
            // console.log(res.data.data[0]);
            setlink_data(res.data.data)
            setList(res.data.data[0])

        })
    }, [])
    //@ts-ignore
    console.log(list[0], 1111);

    useEffect(() => {
        instance.get("https://bjwz.bwie.com/wipi/api/category?articleStatus=publish").then(res => {

            setbook_data(res.data.data)
        })
    }, [])


    return (
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409

        <div className='yesdiv'>
            <div className='mainleft'>
                {

                    link_data[0] &&


                    <div className='cui_dispalay'>
                        <h4 className='cui_h4'>{list[0].title}</h4>
                        <div className='cui_divimg'>
                            <p><img style={{ width: 200, height: 150 }} src={list[0].cover} alt="" /></p>

                            {/* // @ts-ignore */}
                            <p >{list[0].summary}</p>
                            <span className='cui_sps'>
                                <EyeOutlined />&nbsp;&nbsp;58&nbsp;&nbsp; . &nbsp;&nbsp;  
                                
                                <ShareAltOutlined />&nbsp;&nbsp;Share
                                </span>
                        </div>
                    </div>

                }
            </div>
            <div className='leftstr'>

                <div className='topstr'>
                    <h4>{t("Recommended Readings")}</h4>
                    {
                        book_list.map((item: AnyAction) => {
                            return <div>

                                <p>{item.title}</p>
                            </div>
                        })
                    }

                </div>
                <div className='bottomstr'>

                    <h4>{t("Tags")}</h4>
                    {
                        book_data.map((item: any) => {
                            return <div>
                                <p>{item.label} <span>共计{item.articleCount}篇文章</span> </p>
                            </div>
                        })
                    }

                </div>
            </div>
        </div>
<<<<<<< HEAD
=======
=======
        <div>知识小册</div>
>>>>>>> wanghengda
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
    )
}

export default Booklet